<template>
  <div class="app-container">
    <div class="textCenter">
      <div class="tableBox">
        <!-- 节点信息 -->
        <div class="infoBox">
          <div class="title">
            <span class="span">节点信息 1</span>
          </div>
          <div class="bodyRow">
            <el-row>
              <el-col :span="24">
                <div class="formBox">
                  <div class="lable">保障名称：</div>
                  <div class="value">{{ this.subFormDatas.securityName }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="formBox">
                  <div class="lable">保障描述：</div>
                  <div class="value">
                    {{
                      this.subFormDatas.securityDesc
                        ? this.subFormDatas.securityDesc
                        : "--"
                    }}
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="formBox">
                  <div class="lable">主要节点：</div>
                  <div class="value">
                    {{ this.subFormDatas.importantNodeIp }}
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="formBox">
                  <div class="lable">保障节点：</div>
                  <div class="value">
                    {{ this.subFormDatas.securityNodeIp }}
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="formBox">
                  <div class="lable">操作系统：</div>
                  <div class="value">
                    {{ nodeSystemFormat(system.important) }}
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="formBox">
                  <div class="lable">操作系统：</div>
                  <div class="value">
                    {{ nodeSystemFormat(system.security) }}
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 业务配置 -->
        <div class="infoBox">
          <div class="title">
            <span class="span">业务配置 2</span>
          </div>
          <div class="bodyRow">
            <div class="bodyRowBom">
              <div class="leftBox">
                <el-table :data="subFormDatas.securityServices">
                  <el-table-column
                    label="服务名称"
                    align="center"
                    prop="serviceName"
                  />
                  <el-table-column
                    label="服务端口"
                    align="center"
                    prop="servicePort"
                  >
                    <template slot-scope="scope">
                      {{ scope.row.servicePort || "--" }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="启动命令"
                    align="center"
                    prop="startCommand"
                  />
                  <el-table-column
                    label="停止命令"
                    align="center"
                    prop="stopCommand"
                  />
                </el-table>
              </div>

              <div class="rightBox">
                <flowChart
                  :key="active"
                  :service-configurations="this.subFormDatas.securityServices"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 业务保障 -->
        <div class="infoBox">
          <div class="title">
            <span class="span">业务保障 3</span>
          </div>
          <div class="bodyRow">
            <el-row>
              <el-col :span="8">
                <div class="formBox">
                  <div class="lable">保障服务：</div>
                  <div class="value">
                    <span
                      v-for="(item, index) in group_security_method_options"
                      :key="index"
                    >
                      <span
                        v-show="
                          subFormDatas.securityService[0].securityMethod ==
                            item.dictValue
                        "
                      >
                        {{ item.dictLabel }}
                      </span>
                    </span>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row
              v-for="(item, index) in subFormDatas.securityConfs"
              :key="index"
              style="border-top: 1px solid #f4f3f3"
            >
              <el-col v-show="item.securityMethod == 2" :span="8">
                <div class="formBox">
                  <div class="lable">主要网卡名称：</div>
                  <div class="value">
                    {{ item.importantDisplayName || "--" }}
                  </div>
                </div>
              </el-col>
              <el-col v-show="item.securityMethod == 2" :span="8">
                <div class="formBox">
                  <div class="lable">保障网卡名称：</div>
                  <div class="value">
                    {{ item.guaranteeDisplayName || "--" }}
                  </div>
                </div>
              </el-col>
              <el-col v-show="true" :span="8">
                <div class="formBox">
                  <div class="lable">心跳间隔：</div>
                  <div class="value">
                    {{ item.vipCheckInterval || "--" }}
                    <span v-show="item.vipCheckInterval">秒</span>
                  </div>
                </div>
              </el-col>
              <el-col v-show="true" :span="8">
                <div class="formBox">
                  <div class="lable">网关：</div>
                  <div class="value">
                    {{ item.ipv4Gateway || "--" }}
                  </div>
                </div>
              </el-col>

              <el-col v-show="true" :span="8">
                <div class="formBox">
                  <div class="lable">DNS：</div>
                  <div class="value">
                    {{ item.dnsServers || "--" }}
                  </div>
                </div>
              </el-col>
              <el-col v-show="true" :span="8">
                <div class="formBox">
                  <div class="lable">掩码：</div>
                  <div class="value">
                    {{ item.subnetMasks || "--" }}
                  </div>
                </div>
              </el-col>
              <el-col
                v-for="(items, indexs) in item.vipList"
                v-show="true"
                :key="indexs"
                :span="8"
              >
                <div class="formBox">
                  <div class="lable">服务IP：</div>
                  <div class="value">
                    {{ items.value || "--" }}
                  </div>
                </div>
              </el-col>
              <el-col v-show="item.hessProxyIp" :span="8">
                <div class="formBox">
                  <div class="lable">代理服务IP：</div>
                  <div class="value">
                    {{ item.hessProxyIp || "--" }}
                  </div>
                </div>
              </el-col>
              <el-col v-show="item.hessProxyIp" :span="8">
                <div class="formBox">
                  <div class="lable">代理服务端口：</div>
                  <div class="value">
                    {{ item.hessProxyPort || "--" }}
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 配置保障 -->
        <!-- <div class="infoBox">
          <div class="title">
            <span class="span">配置保障目录 4</span>
          </div>
          <div class="bodyRow">
            <el-form ref="form" :inline="true">
              <el-form-item label="全量同步:">
                <span v-if="subFormDatas.fullTransferEnabled" style="color:#67C23A"><i class="el-icon-circle-check" />&nbsp;&nbsp;启用</span>
                <span v-else style="color:#F56C6C"><i class="el-icon-circle-close" />&nbsp;&nbsp;停用</span>

              </el-form-item>
              <el-form-item label="数据同步:">
                <span v-if="subFormDatas.dataMonitorEnabled" style="color:#67C23A"><i class="el-icon-circle-check" />&nbsp;&nbsp;启用</span>
                <span v-else style="color:#F56C6C"><i class="el-icon-circle-close" />&nbsp;&nbsp;停用</span>

              </el-form-item>
            </el-form>
            <div class="pathBox">
              <div class="leftBox transferk">

                <div class=" ">
                  <div class="right-title">
                    <span>复刻目录和文件</span>
                  </div>
                  <div class="rightcontent">

                    <el-scrollbar style="height: 100%;" wrap-class="list" wrap-style="overflow-x:auto;">
                      <div class="rightcontentUL">
                        <p v-show="includePaths.length==0" class=" tipText">未配置复刻目录和文件</p>
                        <div v-for="(data,index) in includePaths " :key="index" class="flexBox">
                          <span class="marginLeft10 textSpanBox">{{ data.path }}</span>

                        </div>
                      </div>
                    </el-scrollbar>
                  </div>
                </div>
              </div>

              <div class="rightBox transferk margin10">
                <div class=" ">
                  <div class="right-title">
                    <span>排除目录和文件</span>
                  </div>
                  <div class="rightcontent">
                    <el-scrollbar style="height: 100%;" wrap-class="list" wrap-style="overflow-x:auto;">
                      <p v-show="copyExcludeFile.length==0" class=" tipText">未配置排除目录和文件</p>
                      <div class="rightcontentUL">
                        <div v-for="(data,index) in copyExcludeFile " :key="index" class="flexBox">
                          <span class="marginLeft10 textSpanBox">{{ data.path }}</span>

                        </div>
                      </div>
                    </el-scrollbar>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->

        <!-- 监控配置 -->
        <!-- <div class="infoBox">
          <div class="title">
            <span class="span">监控配置 5</span>
          </div>
          <div class="bodyRow">
            <el-row>
              <el-col :span="24">
                <div class="formBox">
                  <div class="lable">是否开启预警：</div>
                  <div class="value">{{ this.subFormDatas.securityConfs.isOpen?"开启":"关闭" }}</div>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <div class="formBox">
                  <div class="lable">磁盘限制：</div>
                  <div v-if="this.subFormDatas.securityConfs.isOpen" class="value">
                    <span v-show="this.subFormDatas.securityConfs.useDisk">{{ this.subFormDatas.securityConfs.useDisk }} %
                    </span>
                    <span v-show="this.subFormDatas.securityConfs.useDiskSize">{{ this.subFormDatas.securityConfs.useDiskSize }}
                      M </span>
                  </div>
                  <div v-else class="value">
                    --
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="formBox">
                  <div class="lable">CPU限制：</div>
                  <div v-if="this.subFormDatas.securityConfs.isOpen" class="value">
                    <span v-show="this.subFormDatas.securityConfs.useMem">{{ this.subFormDatas.securityConfs.useMem }} % </span>
                    <span v-show="this.subFormDatas.securityConfs.useMemSize">{{ this.subFormDatas.securityConfs.useMemSize }}
                      M </span>
                  </div>
                  <div v-else class="value">
                    --
                  </div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="formBox">
                  <div class="lable">内存限制：</div>
                  <div v-if="this.subFormDatas.securityConfs.isOpen" class="value">
                    {{ this.subFormDatas.securityConfs.useCpu }} %
                  </div>
                  <div v-else class="value">
                    --
                  </div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="formBox">
                  <div class="lable">监测间隔：</div>
                  <div v-if="this.subFormDatas.securityConfs.isOpen" class="value">
                    {{ this.subFormDatas.securityConfs.intervals }} 分钟
                  </div>
                  <div v-else class="value">
                    --
                  </div>
                </div>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="24">
                <div class="formBox">
                  <div class="lable">是否开启监测：</div>
                  <div class="value">{{ this.subFormDatas.securitySystemTrend.isOpen?"开启":"关闭" }}</div>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <div class="formBox">
                  <div class="lable">磁盘监测：</div>
                  <div v-if="this.subFormDatas.securitySystemTrend.isOpen" class="value">
                    <span v-show="this.subFormDatas.securitySystemTrend.diskUsed">{{ this.subFormDatas.securitySystemTrend.diskUsed }}
                      % </span>
                  </div>
                  <div v-else class="value">
                    --
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="formBox">
                  <div class="lable">进程监测：</div>
                  <div v-if="this.subFormDatas.securitySystemTrend.isOpen" class="value">
                    <span v-show="this.subFormDatas.securitySystemTrend.processNum">{{ this.subFormDatas.securitySystemTrend.processNum }}
                      % </span>
                  </div>
                  <div v-else class="value">
                    --
                  </div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="formBox">
                  <div class="lable">网络监测：</div>
                  <div v-if="this.subFormDatas.securitySystemTrend.isOpen" class="value">
                    {{ this.subFormDatas.securitySystemTrend.networkNum }} %
                  </div>
                  <div v-else class="value">
                    --
                  </div>
                </div>
              </el-col>

              <el-col :span="6">
                <div class="formBox">
                  <div class="lable">监测间隔：</div>
                  <div v-if="this.subFormDatas.securitySystemTrend.isOpen" class="value">
                    {{ this.subFormDatas.securitySystemTrend.intervals }} 分钟
                  </div>
                  <div v-else class="value">
                    --
                  </div>
                </div>
              </el-col>

            </el-row>
          </div>
        </div> -->
      </div>
    </div>
    <div class="textCenter">
      <el-button
        size="small"
        type="primary"
        plain
        @click="backPage"
      >上一步</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submitForm"
      >配置完成</el-button>
    </div>
  </div>
</template>

<script>
import { groupAdd, catalogueEdit } from '@/api/console/group'

import flowChart from '@/views/components/flowChart/flowChart'
export default {
  components: {
    flowChart
  },
  props: {
    active: Number,
    subFormDatas: Object,
    system: Object
  },
  data() {
    return {
      loading: '',
      group_security_method_options: [],
      includePaths: [],
      copyExcludeFile: []
    }
  },
  watch: {
    subFormDatas(n, o) {
      // n为新值,o为旧值;
      // console.log(n)
      this.subFormDatas = n
    }
  },
  created() {
    //  获取操作系统
    this.getDicts('sys_version').then((response) => {
      this.nodeSystem = response.data
    })

    // 保障分组-保障方式
    this.getDicts('group_security_method').then((response) => {
      this.group_security_method_options = response.data
    })
  },
  methods: {
    // 处理页面数据
    processingData() {},
    // 处理数据
    initData() {
      this.includePaths = []
      this.copyExcludeFile = []

      this.subFormDatas.hessGroupPaths.map((item) => {
        if (item.monitorType == 1) {
          this.includePaths.push(item)
        } else if (item.monitorType == 2) {
          this.copyExcludeFile.push(item)
        }
      })

      console.log(this.copyExcludeFile)
    },
    nodeSystemFormat(val) {
      let text = ''

      if (this.nodeSystem) {
        this.nodeSystem.map((item) => {
          if (item.dictValue == val) {
            text = item.dictLabel
          }
        })
      }
      // console.log(text)
      return text
    },
    // 提交数据
    submitForm() {
      let msg = ''
      this.loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      // console.log(this.$props.subFormDatas)

      // this.subFormDatas.securityService.map((item) => {
      //   const arrData = []
      //   item.vipList.map((items) => {
      //     arrData.push(items.value)
      //   })
      //   item.vip = arrData.toString()
      //   return item
      // })

      // this.subFormDatas.securityConfs.useDisk = Number(
      //   this.subFormDatas.securityConfs.useDisk
      // )
      // this.subFormDatas.securityConfs.useMem = Number(
      //   this.subFormDatas.securityConfs.useMem
      // )
      // this.subFormDatas.securityConfs.useDiskSize = Number(
      //   this.subFormDatas.securityConfs.useDiskSize
      // )
      // this.subFormDatas.securityConfs.useMemSize = Number(
      //   this.subFormDatas.securityConfs.useMemSize
      // )
      // this.subFormDatas.securityConfs.intervals = Number(
      //   this.subFormDatas.securityConfs.intervals
      // )

      // this.subFormDatas.securityCatalogues =
      //   this.subFormDatas.securityCatalogues.map((item) => {
      //     item.exclusionPathArr = []
      //     item.exclusionPathArr = item.exclusionPathList.map((item) => {
      //       return item.value
      //     })
      //     item.exclusionFileArr = []
      //     item.exclusionFileArr = item.exclusionFileList.map((item) => {
      //       return item.value
      //     })
      //     return item
      //   })
      // console.log()9
      this.subFormDatas.securityConfs.forEach((f) => {
        const result = f.vipList.map((item) => item.value).join(',')
        f.vip = result
      })

      if (this.subFormDatas.id) {
        msg = '保障组修改成功'

        this.$confirm('是否推送保存最新编辑的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '返回首页',
          distinguishCancelAndClose: true,
          type: 'warning'
        })
          .then(() => {
            catalogueEdit(this.subFormDatas)
              .then((response) => {
                this.$message({
                  message: msg,
                  type: 'success'
                })
                this.loading.close()
                this.$router.push({
                  path: '/service/securityGroup'
                })
              })
              .catch(() => {
                if (this.loading) {
                  this.loading.close()
                }
              })
          })
          .catch((action) => {
            if (this.loading) {
              this.loading.close()
            }
          })
      } else {
        delete this.subFormDatas.securityService
        msg = '保障组添加成功'
        groupAdd(this.subFormDatas)
          .then((response) => {
            this.$message({
              message: msg,
              type: 'success'
            })
            this.loading.close()
            this.$router.push({
              path: '/service/securityGroup'
            })
          })
          .catch(() => {
            if (this.loading) {
              this.loading.close()
            }
          })
      }
    },
    resetForm() {},
    // 上一步
    backPage() {
      this.$emit('changeActive', 2)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tableBox {
  width: 1000px;
  margin: 0 auto;
  text-align: left;
}

.infoBox {
  border: 1px solid gainsboro;
  border-radius: 4px;
  margin-bottom: 30px;

  .title {
    border-bottom: 1px solid gainsboro;
    height: 30px;
    position: relative;

    .span {
      display: inline-block;
      position: absolute;
      left: 20px;
      top: 15px;
      background-color: #ffffff;
      padding: 5px;
      font-size: 14px;
      font-weight: 700;
    }
  }
}

.bodyRow {
  padding: 20px 20px;
}

.formBox {
  padding: 10px 0 10px 0;
  display: flex;
}

.formBoxTitle {
  background-color: #f0f0f0;
}

.formBox .lable {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  width: 110px;
  text-align: right;
}

.formBox .value {
  font-size: 14px;
  color: #666565;
  line-height: 20px;
  flex: 1;
}

.bodyRowBom {
  display: flex;
}

.leftBox {
  width: 100%;
}
.rightBox2 {
  width: 300px;
  padding-left: 10px;
  padding-top: 50px;
}

.flexRow {
  display: flex;
  flex-wrap: wrap;
}

.flexCol {
  width: 50%;
}

.pathBox {
  margin-top: 15px;
  display: flex;
  justify-content: left;

  .pathBox > div {
    display: flex;
  }

  .pathBox > div > div {
    flex: 1;
  }

  .margin10 {
    margin-left: 10px;
  }

  .transferk {
    width: 320px;
    height: 340px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    max-height: 100%;
    position: relative;
  }

  .right-title {
    height: 40px;
    line-height: 40px;
    background: #f5f7fa;
    margin: 0;
    padding-left: 15px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
    color: #666;
    font-weight: bold;
    font-size: 14px;
  }

  .rightcontent {
    margin-right: 1px;
    height: 280px;
  }

  .rightcontentUL {
    height: 300px;
  }

  .marginLeft10 {
    margin-left: 10px;
  }

  .flexBox {
    display: flex;
    padding: 5px 10px;
  }

  .btnSpan {
    color: #0599cc;
    float: right;
    margin-right: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
  }

  .textSpanBox {
    word-wrap: break-word;
    word-break: break-all;
    width: 270px;
    padding-right: 10px;
  }

  .tipText {
    width: 280px;
    margin-left: 10px;
    color: #8f8f8f;
    font-size: 15px;
  }

  .conBox {
    margin: 10px;
    margin-top: 170px;
  }

  .rightBox2 {
    margin-left: 20px;
  }
}

.textCenter{
  text-align: center;
}
</style>
